<template>
  <el-dialog title="菜单" :visible.sync="showDialog" @close="close">
    <el-form label-width="100px" :model="formData" :rules="formRules" ref="form">
      <el-row>
        <el-form-item label="菜单类型" prop="type">
          <el-radio-group v-model.number="formData.type" size="small" @click.native="switchFn">
            <el-radio-button label="1">菜单</el-radio-button>
            <el-radio-button label="2">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row v-if="formData.type==1">
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="permission_name">
            <el-input placeholder="请输入菜单名称" v-model="formData.permission_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单地址" prop="route">
            <el-input placeholder="请输入路由地址，以/开头" v-model="formData.route"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.type==1">
        <el-col :span="12">
          <el-form-item label="组件地址">
            <el-input placeholder="请输入组件路径地址，不以/开头" v-model="formData.component"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限标识" prop="permission_mark">
            <el-input placeholder="格式：controller@action" v-model="formData.permission_mark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.type==1">
        <el-col :span="12">
          <el-form-item label="菜单图标">
            <el-input
              placeholder="点击选择菜单图标"
              readonly
              @click.native="chooseFn"
              :value="formData.icon"
            >
              <i slot="prefix" :class="formData.icon?'':'el-input__icon el-icon-search'">
                <svg-icon v-if="formData.icon" :icon-class="formData.icon" />
              </i>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Redirect">
            <el-input placeholder="请输入Redirect" v-model="formData.redirect"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.type==1">
        <el-col :span="12">
          <el-form-item label="是否外链">
            <template>
              <el-radio-group v-model="formData.islink">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序">
            <el-input-number :min="1" v-model="formData.sort"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.type==1">
        <el-col :span="12">
          <el-form-item label="Hidden">
            <el-radio-group v-model="formData.hidden">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="KeepAlive">
            <el-radio-group v-model="formData.keepalive">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 按钮表格 -->
      <el-row v-if="formData.type==2">
        <el-col :span="12">
          <el-form-item label="按钮名称" prop="permission_name">
            <el-input placeholder="请输入按钮名称" v-model="formData.permission_name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限标识" prop="permission_mark">
            <el-input placeholder="格式：controller@action" v-model="formData.permission_mark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="formData.type==2">
        <el-form-item label="排序">
          <el-input-number :min="1" v-model="formData.sort"></el-input-number>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row type="flex" justify="center">
      <el-button>取消</el-button>
      <el-button type="primary" @click="clickFn">确定</el-button>
    </el-row>

    <!-- 图标选择 -->

    <el-card
      class="icon-body i-con"
      ref="chooseArea"
      v-show="chooseIconShow"
      @click.native="chooseIconShow=true"
    >
      <el-input
        v-model="name"
        style="position: relative;"
        clearable
        placeholder="请输入图标名称"
        @clear="filterIcons"
        @input.native="filterIcons"
        @click.native="chooseIconShow=true"
      >
        <i slot="suffix" class="el-icon-search el-input__icon i-con" />
      </el-input>
      <div class="icon-list i-con">
        <div
          v-for="(item, index) in iconList"
          :key="index"
          @click="selectedIcon(item)"
          class="i-con"
        >
          <svg-icon :icon-class="item" style="height: 30px;width: 16px;" class="i-con" />
          <span class="i-con">{{ item }}</span>
        </div>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
import { addMenuApi, editMenuApi } from '@/api/menu'
import icons from '@/icons/requireIcons'
export default {
  name: 'AddMenu',
  data() {
    document.addEventListener('mouseup', (e) => {
      var e = e || window.event //浏览器兼容性
      var elem = e.target || e.srcElement
      while (elem) {
        //循环判断至跟节点，防止点击的是div子元素
        if (elem.className && elem.className == 'i-con') {
          return
        } else {
          this.chooseIconShow = false
        }
        elem = elem.parentNode
      }
    })
    return {
      chooseIconShow: false, //选择图标的框显隐
      name: '',
      iconList: icons,
      showDialog: false,
      formData: {
        permission_name: '', //菜单名称
        parent_id: 0,
        icon: '',
        component: '', //组件地址
        redirect: '',
        keepalive: 1,
        hidden: 1,
        islink: 1,
        route: '', //菜单地址
        permission_mark: '', //权限标识
        sort: 10, //排序
        type: 1,
      },
      formRules: {
        permission_name: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        route: [{ required: true, message: '请输入', trigger: 'blur' }],
        permission_mark: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    // console.log(requireAll)
  },
  methods: {
    // 创建菜单
    async clickFn() {
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error)
      }
      if (this.formData.id) {
        // id存在就是修改
        await editMenuApi(this.formData)
        this.$message.success('修改成功')
        this.showDialog = false
      } else {
        // id不存在就是添加
        await addMenuApi(this.formData)
        this.$message.success('创建成功')
        this.showDialog = false
      }
      this.$emit('updateList')
    },
    close() {
      this.formData = {
        permission_name: '', //菜单名称
        parent_id: 0,
        icon: '',
        component: '', //组件地址
        redirect: '',
        keepalive: 1,
        hidden: 1,
        islink: 1,
        route: '', //菜单地址
        permission_mark: '', //权限标识
        sort: 10, //排序
        type: 1,
      }

      this.$refs.form.clearValidate()
    },

    chooseFn() {
      //   console.log('哈哈哈')

      this.chooseIconShow = true
    },
    filterIcons() {
      this.iconList = icons
      if (this.name) {
        this.iconList = this.iconList.filter((item) => item.includes(this.name))
      }
    },
    selectedIcon(name) {
      // 图标选择事件
      console.log(name)

      this.formData.icon = name
      setTimeout(() => {
        this.chooseIconShow = false
      }, 0)
    },
    reset() {
      this.name = ''
      this.iconList = icons
    },
    switchFn() {
      //   console.log('鸡哥')
      this.$refs.form.clearValidate()
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}
.icon-body {
  position: absolute;
  left: 120;
  top: 250px;
  width: 434px;
  height: 260px;
  padding: 10px;
  .icon-list {
    height: 200px;
    overflow-y: scroll;
    div {
      height: 30px;
      line-height: 30px;
      margin-bottom: -5px;
      cursor: pointer;
      width: 33%;
      float: left;
    }
    span {
      display: inline-block;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  }
}
</style>